<template>
	<view class="min100 container" style="">
		<view class="topnav flex">
			<image class="ml-30" src='../../static/chip/back.png' mode="widthFix" style="width: 30rpx;"
				@click="backmarket()"></image>
			<!-- <view class="notice" @click="show=true">兑换须知</view> -->
		</view>
		<u-popup  v-model="show" mode="center" :closeable="true" border-radius="14" length="80%">
			<view class="custom-style">
				<view class="center mt-30" style="font-weight: bold;">兑换须知</view>
				<view class="plr-20 ptb-20" v-html="buy_content">
					
				</view>
			</view>
		</u-popup>
		<view class="goodsContent">
			<view class="goodsInfo">
				<image :src="info.images" mode="widthFix"></image>
				<view class="ptb-20 plr-20">
					<view class="flex1">
						<view class=" size-50 bold">
							{{info.integral}}
						</view>
						<view class="size-30 fw ml-10 mt-16">
							真气
						</view>
					</view>
					<view class="">{{info.name}}</view>
				</view>
				
			</view>
			<view class="Information ptb-20 plr-20">
				<view class="center infoTit">商品详情</view>
				<view class="" v-html="content"></view>
			</view>
		</view>
		<view class="btmWrap flex flex-between plr-30">
			<!-- <view class="nonebtn" v-if="info.status==2">首发售空</view> -->
			<view class="flex1" style="color: #E2694A;">
				<view class=" size-50 bold">
					{{info.integral}}
				</view>
				<view class="size-30 fw ml-10 mt-16">
					真气
				</view>
			</view>

			<!-- <u-number-box v-model="value" @change="valChange"></u-number-box> -->
			<view class="">
				<button class="mtb-30 buyBtn " style="color: #fff;" hover-class="none" @click="toBuy"
					:disabled="btnDisabled" v-if="info.status==1">立即购买</button>
				<view class="itemTips plr-40 ptb-8 detail_bottom_price" v-if="info.status==2">
					{{info.status_text}}
				</view>
				<view class="radius-40 plr-40 ptb-8 text-center" v-if="info.status==3"
					style="color:#9fc58c;background:#161912;">
					<view class="">
						{{info.status_text}}
					</view>
					<view class="mt-10">
						{{info.status_time_text}}
					</view>
				</view>
				<view class="itemTips radius-40 plr-40 text-center ptb-8" v-if="info.status==4">
					<view class="">
						{{info.status_text}}
					</view>
					<u-count-down :timestamp="info.diff_time" bg-color="background:transparent" color="#333"
						font-size="24" separator-color="#333" style="margin-left:5rpx"></u-count-down>
				</view>
			</view>
		</view>
		<u-keyboard @change="onChange" ref="uKeyboard" v-model="showKeyboard" @backspace="onBackspace" mode="number"
			 :dot-enabled="false" :tooltip="false" default="">
			<view style="text-align: center;">
				请输入密码
			</view>
			<u-message-input mode="box" :maxlength="6" :dot-fill="true" v-model="password" :disabled-keyboard="true"
				@finish="finish"></u-message-input>
		</u-keyboard>
		<!-- 预览图片 -->
		
	</view>
</template>

<script>
	import uParse from '@/components/u-parse/u-parse.vue'
	import md5Libs from "uview-ui/libs/function/md5"; //引入md5加密方式
	export default {
		components: {
			uParse,
			// md5Libs
		},
		data() {

			return {
				showKeyboard: false, //密码输入的显示隐藏
				password: '', //输入的密码
				blindBoxheight: '',
				textcolor: '0',
				bg_color: '',
				buy_content: '',
				content: '',
				value: 1,
				btnDisabled: false,
				show: false,
				id: "",
				info: {}
			}
		},
		onLoad(options) {
			this.id = options.id;
			this.$http('api/goods/goodsDetail', {
				id: this.id
			}).then(res => {
				this.info = res;
				console.log(this.info);
				this.goods_category_id = this.info.goods_category_id
				this.author_id = this.info.author_id
				this.content = res.content
				this.buy_content = res.buy_content
			})
			let _that = this;
			uni.getSystemInfo({
				success(e) {
					console.log(e.statusBarHeight, '123122222222222222222222');
					if (e.platform == "ios" || e.platform == "devtools") {
						_that.blindBoxheight = e.statusBarHeight + 45;
					} else {
						_that.blindBoxheight = e.statusBarHeight + 50;
					}
				}
			})
			console.log(getApp().globalData);
		},
		onShow() {

		},
		// 吸顶
		// onPageScroll(e) {
		// 	let h = e.scrollTop
		// 	if (h >= 0) {
		// 		if (h <= 0) {
		// 			this.bg_color = ''
		// 			this.textcolor = '0'
		// 		} else if (20 < h && h <= 200) {
		// 			this.bg_color = '#fff'
		// 			this.textcolor = "100%"
		// 		} else if (h > 300) {
		// 			this.bg_color = '#fff'
		// 			this.textcolor = "100%"
		// 		}
		// 	}
		// 	// console.log(this.textcolor);
		// 	//#ifdef H5
		// 	this.isF = true
		// 	// #endif
		// 	// #ifndef H5
		// 	if (this.yuanH > e.scrollTop) {
		// 		this.isF = false
		// 	} else {
		// 		this.isF = true
		// 	}
		// 	// #endif
		// },
		methods: {
			onBackspace(e) {
				if (this.password.length > 0) {
					this.password = this.password.substring(0, this.password.length - 1);
				}
			},
			onChange(val) {
				if (this.password.length < 6) {
					this.password += val;
				}
			
				if (this.password.length >= 6) {
					this.finish(); //封装的结束函数，我是在后续还有请求接口和判断等
				}
			},
			backmarket() {
				uni.navigateBack({
					url: '/pages/home/index'
				})
			},
			// 回退首页
			gobackhome() {
				uni.navigateBack({
					url: '../home/index'
				})
			},
			valChange(e) {
				// console.log('当前值为: ' + e.value)
			},
			
			// 预览图片
			toBuy() {
				// this.btnDisabled=true;
				// this.$http('api/orders/goodsApply', {
				// 	id: this.id,
				// 	num:this.value

				// }).then(res => {
				// 	this.btnDisabled=false;
				// 	uni.navigateTo({
				// 		url: '../pay/collectPay?order_id=' + res.order_id
				// 	})
				// })
				this.btnDisabled = true;
				this.$http('api/user/isTradePass', {}).then(res => {
					if (res.is_trade == 0) { //判断是否设置过密码
						console.log('去设置密码')
						uni.showModal({
							title: '提示',
							content: '还未设置密码，去设置密码',
							success: function(res) {
								if (res.confirm) {
									uni.navigateTo({
										url: './password'
									});
								} else if (res.cancel) {}
							}
						});
					} else if (res.is_trade == 1) {
						this.showKeyboard = true;
						this.password = ''; //唤醒输入组件时清空密码
						// this.$http('api/orders/goodsApplyIntegral', {
						// // this.$http('api/orders/goodsIntegralPay', {
						// 	id: this.id,
						// 	num: this.value
						// 	// pay_type: 10
						// }).then(res => {
						// 	this.btnDisabled = false;
						// 	uni.navigateTo({
						// 		url: '../pay/collectPay?order_id=' + res.order_id + '&type=0'
						// 	})
						// })
					}
				})
			},
			finish() {
				const md5 = md5Libs.md5;
				this.$http('api/user/checkTradePass', {
					pass: this.password
				}).then(res => {
					if (res.is_check == 0) {
						uni.showToast({
							title: "密码错误",
							icon: 'none'
						})
						return;
					} else if (res.is_check == 1) {
						
						this.$http('api/user/userInfo').then(res => {
							if(res.is_heepay_auth == 0){
								uni.showToast({
									icon:"none",
									title:'请先开通钱包'
								})
							}else{
								var time = Date.parse(new Date()).toString(); //精确到毫秒
								time = time.substr(0, 10); //精确到秒
								this.$http('api/orders/goodsApplyIntegral', {
								// this.$http('api/orders/goodsIntegralPay', {
									id: this.id,
									// num: this.value
									time: time,
									pay_password: md5(`${this.password}`),
									// sign: md5(`${this.id}${md5(`${time}`)}${this.password}`),
									sign: md5(this.id+time+md5(`${this.password}`))
									// pay_type: 10
								},'POST').then(res => {
									this.btnDisabled = false;
									// uni.navigateTo({
									// 	url: '../pay/collectPay?order_id=' + res.order_id + '&isshow=0'
									// })
									uni.navigateTo({
										url: '../pay/mallPay?order_id=' + res.order_id + '&isshow=0'
									})
								})
								
								
								
							}
							
						});
						
						
					}
				});
				this.showKeyboard = false;
			},
			
		}
	}
</script>

<style lang="less" scoped>
	.container{
		background-color: #F9F9F9;
		.topnav{
			width: 100%;
			height: 100rpx;
			line-height: 100rpx;
			padding-right: 20rpx;
			.notice{
				padding: 0 20rpx;
				border: 1rpx solid #CFD5D5;
				box-sizing: border-box;
				font-size: 24rpx;
				height: 60rpx;
				line-height: 60rpx;
				color: #6190DE;
				background: #E9F6FE;
				border-radius: 30rpx;
				
			}
		}
		.goodsContent{
			
			.goodsInfo{
				width: 100%;
				background: #fff;
				image{
					width: 100%;
				}
			}
			.Information{
				margin-top: 40rpx;
				background-color: #fff;
				.infoTit{
					font-size: 36rpx;
					font-weight: bold;
					margin-bottom: 20rpx;
				}
			}
		}
	}
	.detail_bottom_price {
		width: 490rpx;
		height: 70rpx;
		text-align: center;
		font-size: 24rpx;
		line-height: 70rpx;
		color: #FFF;
		border-radius: 15rpx;
	}
	.flex_around {
		display: flex;
		justify-content: space-around;
	}
	.flex_between {
		display: flex;
		justify-content: space-between;
	}
	.flex {
		display: flex;
	}
	.buyBtn {
		font-size: 28rpx;
		color: #040404;
		line-height: 80rpx;
		height: 80rpx;
		background: #44ACFF;
		border-radius: 40rpx;
		width: 210rpx;
	}
	.btmWrap {
		position: fixed;
		z-index: 10;
		width: 100%;
		bottom: 0;
		background: #fff;
		.nonebtn {
			width: 90%;
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 50rpx;
			background-color: rgba(#714aed, .4);
			margin: 0 auto;
			text-align: center;
			color: #fff;
		}
	}
	.itemTips {
		font-size: 28rpx;
		background: #DEE4E8 !important;
		// border-radius: 40rpx;
	}
</style>
